<template>
  <div class="app-container">
    <el-descriptions :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          分配人员
        </template>
        {{info.assignedPersonnel | personName(personList, info.assignedPersonnel)}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          紧急程度
        </template>
        <dict-tag :options="dict.type.work_order_emergency_type" :value="info.urgencyLevel"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          派单时间
        </template>
        {{ info.dispatchTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上门时间
        </template>
        {{info.onsiteTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          现场联系人
        </template>
        {{info.onsiteContact}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系电话
        </template>
        {{info.contactNumber}}
      </el-descriptions-item>

      <el-descriptions-item span="2">
        <template slot="label">
          备注
        </template>
        {{info.notes}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          图片
        </template>
        <div v-if="info.images">
          <image-preview v-for="src in info.images.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" border style="margin-top: 20px">
      <el-descriptions-item>
        <template slot="label">
          资产编号
        </template>
        <el-link type="primary" @click="showInfo(info.assetId)">{{info.assetNumber}}</el-link>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          资产名称
        </template>
        {{info.assetId | assetName(assetList, info.assetId)}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" border style="margin-top: 20px">
      <el-descriptions-item>
        <template slot="label">
          工单状态
        </template>
        <dict-tag :options="dict.type.work_order_status" :value="info.workOrderStatus"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          处理时间
        </template>
        --
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          发现问题
        </template>
        {{ info.problemDescription }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          问题严重程度
        </template>
        <dict-tag :options="dict.type.order_severity_level" :value="info.severityLevel"/>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          所用材料
        </template>
        --
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          备注
        </template>
        {{info.notes}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          图片
        </template>
        <div v-if="info.images">
          <image-preview v-for="src in info.images.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {getOrder, getOrderWorker,} from "@/api/business/order";
import {getAssetInfoList} from "@/api/business/assetInfo";
export default {
  name: "inspectionInfo",
  dicts: ['work_order_method', 'work_order_emergency_type', 'work_order_type', 'work_order_status', 'order_severity_level'],
  data() {
    return {
      info: {},
      id: null,
      assetList: [],
      personList: []
    }
  },
  created() {
    this.getOrderWorker()
    this.getInfoData()
    this.id = this.$route.params && this.$route.params.id;

  },
  mounted() {
    if(this.id) {
      this.getOrder()
    }
  },
  methods: {
    getOrderWorker() {
      getOrderWorker().then(r => {
        this.personList = r
      })
    },
    getInfoData() {
      getAssetInfoList().then(r => {
        this.assetList = r.data
      })
    },
   getOrder() {
     getOrder(this.id).then(r => {
       this.info = r.data
     })
   },
    /** 复跳转详情 */
    showInfo(assetId) {
      this.$router.push('/AssetLedger/asset-info/' + assetId)
    },
  },
  filters: {
    assetName: (value, list) => {
      let item = list.find(item => item.assetId == value)
      return item ? item.assetName : ''
    },
    assetId: (value, list) => {
      let item = list.find(item => item.assetId == value)
      if(item) {
        return item && item.assetNumAttached ? `${item.assetNumMaster}-${item.assetNumAttached}` : `${item.assetNumMaster}`
      } else {
        return  ''
      }

    },
    personName: (value, list) => {
      let item = list.find(item => item.value == value)
      return item? item.label : ''
    }
  },
}
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}
.formC {
  width: 100%;
  padding: 0 50px;
  height: calc(100vh - 170px);
  overflow-y: auto;
}

</style>
